<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!-- 采用绝对路径导入css文件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css"/>
    <!-- 采用绝对路径导入jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
    <%--统计字数--%>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/startMonitor.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#privilege").children().eq(${requestScope.user.privilege}).attr("selected","selected")

            //将alert设置成异步代码，防止阻塞页面显示
            if ("${param.msg}" === "0") {
                setTimeout('alert("修改成功")', 10)
            } else if ("${param.msg}" === "1") {
                setTimeout('alert("修改失败，用户名已存在")', 10)
            } else if ("${param.msg}" === "2") {
                setTimeout('alert("修改失败，昵称已存在")', 10)
            }

            $("#import").upload({
                action: '${pageContext.request.contextPath}/manager/userServlet?action=uploadFace&user_id=${param.user_id}',
                name: 'upload',
                onSelect: function () {
                    //选中文件后，关闭自动提交
                    this.autoSubmit = false;
                    let filename = this.filename();
                    //校验文件后缀名
                    let reqex = /^.*\.(jpg|jpeg|png|gif)$/i
                    if (reqex.test(filename)) {
                        this.submit();
                        // alert("文件上传成功");
                    } else {
                        alert("只能上传jpg、png、gif格式的图片")
                    }
                },
                onComplete: function () {
                    // alert("ok")
                    location.reload()
                },
            })
            $("#update").click(function () {
                $("#username").removeAttr("disabled")
                $("#name").removeAttr("disabled")
                $("#email").removeAttr("disabled")
                //只有超级管理员才能修改用户权限，并且超级管理员不能修改自己的权限
                if("${sessionScope.user.privilege}"==="0" && "${requestScope.user.id}" !== "1"){
                    $("#privilege").removeAttr("disabled")
                    $("#privilege").addClass("input")
                    $("#privilege").children().eq(0).attr("hidden","hidden")
                }
                $("#update").css("display", "none")
                $("#back").css("display", "none")
                $("#tablesubmit").css("display", "")
                $("#cancel").css("display", "")
                $(".input").css("color", "black")
            })
            $("#cancel").click(function () {
                $("#username").attr("disabled", "disabled")
                $("#name").attr("disabled", "disabled")
                $("#email").attr("disabled", "disabled")
                $("#privilege").attr("disabled", "disabled")
                $("#update").css("display", "")
                $("#back").css("display", "")
                $("#tablesubmit").css("display", "none")
                $("#cancel").css("display", "none")
                $(".input").css("color", "#979696")
            })
            $("#tablesubmit").click(function () {
                let usernameText = $("#username").val();
                let usernamePatt = /^[A-Za-z0-9]{5,12}$/;
                if (!usernamePatt.test(usernameText)) {
                    alert("用户名不合法(5-12位英文和数字)")
                    return false;
                }
                let nameText = $("#name").val();
                let namePatt = /^.{3,12}$/;
                console.log(nameText)
                if (!namePatt.test(nameText)) {
                    alert("昵称不合法(3-12位字符)")
                    return false;
                }
                let emailText = $("#email").val();
                let emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/
                if (!emailPatt.test(emailText)) {
                    alert("邮箱不合法");
                    return false;
                }
            })
        })
    </script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" fill-opacity="1"
          d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
<div id="header">
    <span class="wel_word">个人信息</span>
</div>

<div id="main">
    <form action="${pageContext.request.contextPath }/manager/userServlet" method="get">
        <input type="hidden" name="action" value="updateInfo">
        <input type="hidden" name="user_id" value="${param.user_id}">
        <div style="float: left;position: absolute;width: 30%;height: 100%;z-index: -1">
            <div style="height: 300px;width: 300px;margin: auto;
                 position: absolute;left: 0;right: 35px;bottom: 0;top: 0;text-align: center">
                <img id="face" src="${pageContext.request.contextPath}${requestScope.user.face_path}"
                     style="height: 200px;width: 200px">
                <div style="margin-top: 50px;transform: translateX(110px)">
                    <button type="button" id="import" class="btn btn-light" style="border: #999999 solid 1px">更换头像
                    </button>
                </div>
            </div>
        </div>
        <div style="float: right;width: 70%;height: 100%;margin: 100px 40px">
            <username>
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control input" id="username" name="username" disabled
                           value="${requestScope.user.userName}" placeholder="用户名">
                </div>
            </username>

            <name>
                <div class="mb-3">
                    <label for="name" class="form-label">昵称</label>
                    <input type="text" class="form-control input" id="name" name="name" disabled
                           value="${requestScope.user.name}" placeholder="昵称">
                </div>
            </name>
            <div class="mb-3">
                <label for="privilege" class="form-label">权限</label>
                <select class="form-control" id="privilege" name="privilege"
                        style="color: #979696;font-weight: bold" disabled="disabled">
                    <option name="privilege" value="0" disabled="disabled">超级管理员</option>
                    <option name="privilege" value="1">管理员</option>
                    <option name="privilege" value="2">用户</option>
                </select>
            </div>
            <email>
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="text" class="form-control input" id="email" name="email"
                           value="${requestScope.user.email}"
                           disabled style="color: #979696;" placeholder="邮箱">
                </div>
            </email>
            <button-group>
                <a id="update" class="btn btn-primary btn-lg" style="margin: 10px 0 0 0">修改</a>
                <input id="tablesubmit" type="submit" class="btn btn-primary btn-lg" value="保存"
                       style="display: none;margin: 10px 0 0 0"/>
                <a id="cancel" class="btn btn-primary btn-lg" style="display: none;margin: 10px 0 0 10px">取消</a>
                <c:if test="${sessionScope.user.id==param.user_id}">
                    <c:set var="back_href" value="${pageContext.request.contextPath}/manager/homeCostServlet?action=page&pageSize=4&pageNo=1"/>
                </c:if>
                <c:if test="${sessionScope.user.id!=param.user_id}">
                    <c:set var="back_href" value="${pageContext.request.contextPath}/manager/userServlet?action=page&pageSize=4&pageNo=1"/>
                </c:if>
                <a id="back" class="btn btn-primary btn-lg"
                   href="${back_href}"
                   style="margin: 10px 0 0 10px">返回</a>
            </button-group>
        </div>

    </form>
</div>

</body>
</html>